<template>
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>门店二维码管理</span>
      </div>
    </div>
    <div class="ba_f8 pad_20">
      <div class="lh25 msgtext fon_12">
        温馨提示：请保证到当前小程序主体已认证并且已完善资料；<br>
        1、登录<a href="https://mp.weixin.qq.com/" target="_blank">微信小程序后台</a>,依次找到菜单 开发管理-开发设置，启用并添加“扫普通链接二维码打开小程序” 路径
        <span @click="tishiImg(1)" class="subjectcolor2 curs mar_l5">提示</span>;<br>
        <div class="flex shangchuan">
          <div> 2、下载校验文件，上传至网站根目录<span @click="tishiImg(2)" class="subjectcolor2 curs mar_l5">提示</span>;</div>
          <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                     :on-success="handleSuccess" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                     :file-list="fileList" :data="uploadData"
                     :auto-upload="true" :on-change="changeFile" accept=".txt">
            <el-button type="primary" size="mini" class="mar_l10" @click="upLoad(1)">点击上传</el-button>
          </el-upload>
          <br>
        </div>
        3、设置规则，页面路径：yb_wm/order/other/smjh，具体配置如图<span @click="tishiImg(3)" class="subjectcolor2 curs mar_l5">提示</span>；<br>
        4、保存后并发布，稍等几分钟之后刷新本页面，即可生成二维码。<span @click="tishiImg(4)" class="subjectcolor2 curs mar_l5">提示</span>
      </div>

      <div class="lh25 msgtext fon_12 mar_t20">
        支付宝小程序温馨提示：请保证到当前小程序主体已认证并且已完善资料；<br>
        1、登录<a href="https://mini.open.alipay.com/channel/miniIndex.htm" target="_blank">支付宝小程序后台</a>,依次找到菜单 服务内容-码管理
        <span @click="tishiImg(5)" class="subjectcolor2 curs mar_l5">提示</span>;<br>
        <div class="flex shangchuan">
          <div> 2、下载校验文件，上传至网站根目录<span @click="tishiImg(6)" class="subjectcolor2 curs mar_l5">提示</span>;</div>
          <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                     :on-success="handleSuccess" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                     :file-list="fileList" :data="uploadData"
                     :auto-upload="true" :on-change="changeFile" accept=".html">
            <el-button type="primary" size="mini" class="mar_l10" @click="upLoad(2)">点击上传</el-button>
          </el-upload>
          <br>
        </div>
      </div>
    </div>
    <div class="flex mar_t20">
      <div class="flex-g-1 mar_lr20 t_c card">
        <div class="fon_16 lh16 wei">点单码</div>
        <div class="color_6 mar_t20 fon_14">门店点单二维码，用于用户扫码点单</div>
        <div class="mar_t40">
          <img class="codeimg" :src="goods.url"/>
        </div>
        <div class="flex-center">
          <div class="flex">
            <div>二维码链接：</div>
            <div>
              <el-button type="text" @click="copyText(goods.data)">复制</el-button>
            </div>
          </div>
          <div class="flex mar_l20">
            <div>小程序链接：</div>
            <div>
              <el-button type="text" @click="copyText('yb_wm/index/goods')">复制</el-button>
            </div>
          </div>
        </div>
        <div class="mar_t20">
          <a :href='downloadCode(goods.downUrl)'>
            <el-button type="primary">下载聚合码</el-button>
          </a>
          <!--          <a :href='downloadCode(wxDdmcodeImg)' target="_blank" class="mar_l20">-->
          <el-button @click="wxDdmcode" class="mar_l20">微信小程序码</el-button>
          <!--          </a>-->
<!--          <a :href='downloadCode(zfbDdmcodeImg)' target="_blank" class="mar_l20">-->
            <el-button  @click="zfbDdmCode">支付宝小程序码</el-button>
<!--          </a>-->
        </div>
      </div>
      <div class="flex-g-1 mar_lr20 t_c card">
        <div class="fon_16 lh16 wei">快餐码</div>
        <div class="color_6 mar_t20 fon_14">门店快餐二维码，用于用户扫码下单</div>
        <div class="mar_t40">
          <img class="codeimg" :src="fastOrder.url"/>
        </div>
        <div class="flex-x-center">
          <div class="flex">
            <div>二维码链接：</div>
            <!--                        <div class="mar_lr10">{{fastOrder.data}}</div>-->
            <div>
              <el-button type="text" @click="copyText(fastOrder.data)">复制</el-button>
            </div>
          </div>
          <div class="flex mar_l20">
            <div>小程序链接：</div>
            <div>
              <el-button type="text" @click="copyText('yb_wm/shop/ffmode/goods')">复制</el-button>
            </div>
          </div>
        </div>
        <div class="mar_t20">
          <a :href='downloadCode(fastOrder.downUrl)'>
            <el-button type="primary">下载聚合码</el-button>
          </a>
<!--          <a :href='downloadCode(wxKccodeImg)' target="_blank" class="mar_l20">-->
            <el-button  @click="wxKccode" class="mar_l20">微信小程序码</el-button>
<!--          </a>-->
<!--          <a :href='downloadCode(zfbKccodeImg)' target="_blank" class="mar_l20">-->
            <el-button  @click="zfbKcCode">支付宝小程序码</el-button>
<!--          </a>-->
        </div>
      </div>
      <div class="flex-g-1 mar_lr20 t_c card">
        <div class="fon_16 lh16 wei">当面付</div>
        <div class="color_6 mar_t20 fon_14">门店自己的收银二维码，用于用户扫码付款</div>
        <div class="mar_t40">
          <img class="codeimg" :src="cashier.url"/>
        </div>
        <div class="flex-x-center">
          <div class="flex">
            <div>二维码链接：</div>
            <!--                        <div class="mar_lr10">{{cashier.data}}</div>-->
            <div>
              <el-button type="text" @click="copyText(cashier.data)">复制</el-button>
            </div>
          </div>
          <div class="flex mar_l20">
            <div>小程序链接：</div>
            <div>
              <el-button type="text" @click="copyText('yb_wm/shop/in/dmf')">复制</el-button>
            </div>
          </div>
        </div>
        <div class="mar_t20">
          <a :href='downloadCode(cashier.downUrl)'>
            <el-button type="primary">下载聚合码</el-button>
          </a>
<!--          <a :href='downloadCode(wxDmfcodeImg)' target="_blank" class="mar_l20">-->
            <el-button  @click="wxDmfcode" class="mar_l20">微信小程序码</el-button>
<!--          </a>-->
<!--          <a :href='downloadCode(zfbDmfcodeImg)' target="_blank" class="mar_l20">-->
            <el-button  @click="zfbDmfCode" class="mar_l20">支付宝小程序码</el-button>
<!--          </a>-->
        </div>
      </div>
    </div>
    <codeEdit ref="codeEdit" @fetchData="fetchData"></codeEdit>
    <el-dialog title="操作提示" :visible.sync="dialogTableVisible4" :close-on-click-modal='false' width="1300px"
               class="tishidialog">
      <div class="t_c">
        <div v-show="tishiType=='1'" class="t_l">
          <img src="../../assets/img/instore/tishi1.png" class="mar_l20">
        </div>
        <div v-show="tishiType=='2'" class="t_c">
          <img src="../../assets/img/instore/tishi2.png" class="mar_l20">
        </div>
        <div v-show="tishiType=='3'" class="t_c">
          <img src="../../assets/img/instore/tishi3.jpg" class="mar_l20">
        </div>
        <div v-show="tishiType=='4'" class="t_l">
          <img src="../../assets/img/instore/tishi4.png" class="mar_l20">
        </div>
        <div v-show="tishiType=='5'" class="t_l">
          <img src="../../assets/img/instore/tishi5.png" class="mar_l20">
        </div>
        <div v-show="tishiType=='6'" class="t_l">
          <img src="../../assets/img/instore/tishi6.png" class="mar_l20">
        </div>
      </div>
    </el-dialog>
    <el-dialog
        title="二维码"
        :visible.sync="dialogVisiblecode"
        :close-on-click-modal="false"
        width="40%">
      <div class="t_c">
        <img :src="wxDdmcodeImg" class="wid imgCode" v-if="codeType=='1'"/>
        <img :src="wxKccodeImg" class="wid imgCode" v-if="codeType=='2'"/>
        <img :src="wxDmfcodeImg" class="wid imgCode" v-if="codeType=='3'"/>
        <img :src="zfbDdmcodeImg" class="wid imgCode2" v-if="codeType=='4'"/>
        <img :src="zfbKccodeImg" class="wid imgCode2" v-if="codeType=='5'"/>
        <img :src="zfbDmfcodeImg" class="wid imgCode2" v-if="codeType=='6'"/>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblecode = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="dialogVisiblecode = false" size="medium">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {codeList, getStoreCode} from "@/api/instore";
import codeEdit from "./components/loadcode";
import {getAlipayCode, getCode} from "@/api/setup";
import index from "@/api";

export default {
  components: {codeEdit},
  created() {
    this.fetchData();
  },
  data() {
    return {
      activeName: '1',
      storeId: '',
      fastOrder: '',
      cashier: '',
      goods: '',
      dialogTableVisible4: false,
      tishiType: '',
      wxDdmcodeImg: '',
      zfbDdmcodeImg: '',
      wxKccodeImg: '',
      zfbKccodeImg: '',
      wxDmfcodeImg: '',
      zfbDmfcodeImg: '',
      dialogVisiblecode: false,
      codeType: '',
    }
  },
  methods: {
    copyText(row) {
      let Url2 = row;
      var oInput = document.createElement('input');
      oInput.value = Url2;
      console.log(oInput.value);
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand("Copy");
      oInput.className = 'oInput';
      oInput.style.display = 'none';
      this.$message({
        message: '复制成功',
        type: 'success'
      });
    },
    async fetchData() {
      const {data} = await getStoreCode();
      this.fastOrder = data.fastOrder
      this.cashier = data.cashier
      this.goods = data.goods
    },
    // wxzfbcode() {
    //   this.wxDdmcode()
    //   this.wxKccode()
    //   this.wxDmfcode()
    //   this.zfbDdmCode()
    //   this.zfbKcCode()
    //   this.zfbDmfCode()
    // },
    async wxDdmcode() {
      const {data} = await getCode({ident: 'goods', page: 'yb_wm/index/goods'});
      if (data) {
        this.wxDdmcodeImg = data;
      }
      this.codeType = 1
      this.dialogVisiblecode = true
    },
    async wxKccode() {
      const {data} = await getCode({ident: 'fastOrder', page: 'yb_wm/shop/ffmode/goods'});
      if (data) {
        this.wxKccodeImg = data;
      }
      this.codeType = 2
      this.dialogVisiblecode = true
    },
    async wxDmfcode() {
      const {data} = await getCode({ident: 'dmf', page: 'yb_wm/shop/in/dmf'});
      if (data) {
        this.wxDmfcodeImg = data;
      }
      this.codeType = 3
      this.dialogVisiblecode = true
    },
    zfbDdmCode() {
      getAlipayCode({page: 'yb_wm/index/goods', pageType: 'ali'}).then((res) => {
        if (res.code == 1) {
          if (res.data.code == 1) {
            this.zfbDdmcodeImg = `${res.data.data}+.jpg`;
          }
          this.codeType = 4
          this.dialogVisiblecode = true
        }
      });
    },
    zfbKcCode() {
      getAlipayCode({page: 'yb_wm/shop/ffmode/goods', pageType: 'ali'}).then((res) => {
        if (res.code == 1) {
          if (res.data.code == 1) {
            this.zfbKccodeImg = `${res.data.data}+.jpg`;
          }
          this.codeType = 5
          this.dialogVisiblecode = true
        }
      });
    },
    zfbDmfCode() {
      getAlipayCode({page: 'yb_wm/shop/in/dmf', pageType: 'ali'}).then((res) => {
        if (res.code == 1) {
          if (res.data.code == 1) {
            this.zfbDmfcodeImg = `${res.data.data}+.jpg`;
          }
          this.codeType = 6
          this.dialogVisiblecode = true
        }
      });
    },
    tishiImg(type) {
      this.tishiType = type
      this.dialogTableVisible4 = true
    },
    // handleEdit(row) {
    //     if (row.id) {
    //         this.$refs["codeEdit"].showEdit(row);
    //     } else {
    //         this.$refs["codeEdit"].showEdit();
    //     }
    // },
    downloadCode(row) {
      return row
    },
    upLoad(type) {
      this.type = type
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleSuccess() {
      var formData = new FormData();
      formData.append("file", this.file.raw);
      formData.append('type', this.type);
      this.$api.post('channel/in-store/code-set', formData, res => {
        if (res.code == 1) {
          this.$message.success(res.msg);
        } else {
          this.$message.success(res.msg);
        }
      });
    },
    //文件超出的的提示
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    changeFile(file, fileList) {
      // console.log(file, fileList)
      this.file = file
      this.fileList = fileList
      var This = this;
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function (e) {
        this.result // 这个就是base64编码了
        This.imageUrl = this.result;
        // console.log('result', this.result)
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.codeimg {
  width: 152px;
  height: 152px;
}

.card {
  border: 1px solid #EBEEF5;
  background-color: #FFF;
  color: #303133;
  padding: 37px 0px 67px;
}

.imgCode {
  width: 400px;
  height: 400px;
}
.imgCode2 {
  width: 400px;
  height: 450px;
}
</style>

